import { debounce } from '@/utils/helper';
import {trim} from '@/utils/index';
import { Image, Input, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import {loginBack} from '@/utils/loginBack'
import classNames from 'classnames';
import React, { useState } from 'react';
import '../h5-login.scss'

const UserPwdLogin = ({ toggle, agreementInfoLogin }) => {
  const [val, setVal] = useState({});
  const appConfig = Taro.getStorageSync('appConfig') || {}
  const updateVal = (v) => {
    setVal({ ...val, ...v });
  };

  const login = debounce(() => {
    if (!val.mobile) {
      Taro.showToast({
        title: '请输入您的账号',
        icon: 'none',
      });
      return;
    }

    if (!trim(val.password)) {
      Taro.showToast({
        title: '请填写密码',
        icon: 'none',
      });
      return;
    }

    // if (agreementInfoLogin?.agreements?.length > 0 && !agreementInfoLogin?.isSelected) {
    //   Taro.showToast({
    //     title: '请勾选并同意协议条款',
    //     icon: 'none',
    //   });
    //   return;
    // }

    Taro.$post('/mb/logins',{
      username: val.mobile,
      password: val.password,
      loginType: 'USER_PASSWORD',
    }).then(res=>{
      if(res.code == '1'){
        Taro.$toast('登录成功')
        setTimeout(() => {
          const timestamp = new Date().getTime();
          if(res.content.userSource == 'USER'){
            Taro.setStorageSync('user',{
              ...res.content,
              loginType: 'USER_PASSWORD',
              timestamp
            });
          }
          Taro.setStorageSync('userSource',res.content.userSource)
          Taro.setStorageSync('token',res.content.token.accessToken)
          Taro.eventCenter.trigger('updateLogin')
          loginBack()
        }, 1000);
      }else{
        Taro.$toast(res.message)
      }
    })
  }, 2000);

  return (
    <View className='H5Login'>
      <Image src={appConfig?.iconUrl || require('@/images/gray.jpg')} className="logo" />

      <View className="form">
        <View className="line">
          <Input
            className="input"
            type="text"
            value={val.mobile}
            placeholder="请输入您的账号"
            placeholderClass="input-placeholder"
            onInput={(e) => {
              updateVal({ mobile: e.detail.value });
            }}
          />
        </View>

        <View className="split-line"></View>

        <View className="line">
          <Input
            className="input"
            type="password"
            value={val.password}
            placeholder="输入密码"
            placeholderClass="input-placeholder"
            onInput={(e) => {
              updateVal({ password: e.detail.value });
            }}
          />
        </View>

        <View className="split-line"></View>
      </View>

      <View className={classNames('btn-login', {
          'disabled':
            !val.mobile ||
            !val.password ||
            (agreementInfoLogin?.agreements?.length > 0 && !agreementInfoLogin?.isSelected),
        })}
        onClick={login}
      >
        <View className="txt">登录</View>
      </View>

      <View className="toggle" onClick={toggle}>
        验证码登录
      </View>

      <View className="notice">未注册的手机号验证后自动创建账户</View>

    </View>
  );
};

export default UserPwdLogin